<!--
 * @Author: zhang00001 774004514@qq.com
 * @Date: 2024-06-17 10:18:04
 * @LastEditors: zhang00001 774004514@qq.com
 * @LastEditTime: 2024-08-02 17:25:48
 * @FilePath: \vue-admin\src\pages\active\ActivityForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-drawer
      :title="'查看回复'"
      placement="right"
      :maskClosable="false"
      :keyboard="false"
      width="800"
      @close="showAddDialog = false"
      v-model:open="showAddDialog"
    >
      <a-form
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        ref="formRef"
        label-position="top"
      >
        <a-table
          :columns="RepliesColumns"
          :dataSource="dataObj"
        >
          <template  #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'Admin'">
              <div class="user-info">
                <img
                  class="user-info-avatar"
                  :src="record?.Admin?.avatar"
                  alt=""
                />
                <div class="user-name">
                  <div class="name">{{ record?.Admin?.admin_name }}</div>
                </div>
              </div>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-popconfirm
              class="gap-popconfirm"
              title="确定删除吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handleDel(record)"
            >


              <a  >删除</a>
            </a-popconfirm>
              <a-divider type="vertical" />
              <!-- <a @click="handleUpdate(record)">修改</a> -->
            </template>
          </template>
        </a-table>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button @click="showAddDialog = false">取消</a-button>
        </a-form-item>
      </a-form>
      <previewEditor ref="previewEditorEle"></previewEditor>
    </a-drawer>
  </div>
</template>

<script setup>
  import { extractImageUrls, deleteMultiples } from '@/utils/power.js'
  import { message } from 'ant-design-vue'
  import config from '@/config/index.js'
  import previewEditor from '@/components/previewEditor.vue'
  import { newsAdd, newsUpdate, adminDelTag,replyDelete  } from '@/api/index.js'
  import { ref, defineEmits, defineExpose, defineProps, toRefs, nextTick } from 'vue'
  import Collect from 'collect.js'
  const emits = defineEmits(['success', 'close'])
  const props = defineProps({})
  const showAddDialog = ref(false)
  const loading = ref(false)
  const formRef = ref()
  const RepliesColumns = [
    {
      title: '回复人员',
      dataIndex: 'Admin',
      width: '80px'
    },
    {
      title: '回复内容',
      dataIndex: 'content',
      width: '80px'
    },
    {
      title: '回复时间',
      dataIndex: 'created_at',
      width: '80px'
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '200px',
      fixed: 'right'
    }
  ]
  const handleDel = (row) => {
    replyDelete({
      reply_id: row.reply_id
    }).then(res=>{
      if (res.errorCode) {
        message.error(res.msg)
        return
      }
      showAddDialog.value = false
      message.success('删除成功')
      emits('success')
    })


  }
  const handleDelUpdate = (row) => {}
  const formData = ref({
    // uid: 1,
    content: '',
    image: '',
    title: ''
  })
  const previewEditorEle = ref(null)
  const previewEditDialog = () => {
    previewEditorEle.value.init(formData.value.content)
  }
  const uploadVisible = ref(false)
   
  const dataObj = ref(null)
  const dateRow = ref(null)
  const richImage = ref(null)
  const init = (row) => {
    showAddDialog.value = true
    nextTick(() => {
      dateRow.value=row
      dataObj.value = row.Replies
    })
    //
  }
  defineExpose({
    init
  })
</script>

<style scoped lang='less'>
  .user-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .user-info-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
</style>
